<template>
    <div id="bg">
        <div id="hint">
            <p>设计得到业务运营后台 v1.0</p>
        </div>
        <div id="login_wrap">
            <div id="login">
                <div id="status">用户登录</div>
                <span>
                    <el-form
                        :model="param"
                        :rules="rules"
                        ref="login"
                        label-width="0px"
                        class="ms-content"
                    >
                        <el-form-item prop="username">
                            <el-input
                                v-model="param.username"
                                placeholder="username"
                            >
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input
                                type="password"
                                placeholder="password"
                                v-model="param.password"
                                @keyup.enter.native="submitForm"
                            >
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="ycode">
                            <el-input
                                ref="ycode"
                                v-model="param.ycode"
                                placeholder="verificate code"
                                name="ycode"
                                type="text"
                                tabindex="1"
                                autocomplete="on"
                                style="width: 74%"
                            />
                            <span class="canvas-div" @click="draw">
                                <canvas
                                    id="canvas"
                                    width="50"
                                    height="30"
                                    style="
                                        float: right;
                                        margin-top: -10px;
                                        position: relative;
                                        z-index: 11;
                                    "
                                ></canvas>
                            </span>
                        </el-form-item>
                        <div class="login-btn">
                            <el-button type="warning" @click="submitForm"
                                >登录</el-button
                            >
                        </div>
                    </el-form>
                </span>
            </div>

            <div id="login_img">
                <!-- 图片绘制框 -->
                <span class="circle">
                    <img
                        src="http://www.shejidedao.cn/static/img/logo.png?v=2019080967876"
                        alt=""
                    />
                
                </span>
                <span class="star">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </span>
                <span class="fly_star">
                    <span></span>
                    <span></span>
                </span>
                <!-- <p id="title">
                    <i>C</i>
                    <i>L</i>
                    <i>O</i>
                    <i>U</i>
                    <i>D</i>
                </p> -->
            </div>
        </div>
        <div id="bottom_wrap">
            技术支持：上海聚枢信息科技有限公司 电话：021-56519200 <br />
            邮件：sedzhao@haoju.me ICP证：豫ICP备19025863号-1
        </div>
    </div>
</template>

<script>
import global from '@/common'
import { getToken, setToken, removeToken, setItem, getItem } from '@/plugins/auth'

export default {
    data() {
        return {
            onoff: true,
            param: {
                username: "",
                password: "",
                ycode: "",
            },
            show_num: [],
            verificode: "",
            rules: {
                username: [
                    {
                        required: true,
                        message: "请输入用户名",
                        trigger: "blur",
                    },
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                ],
                ycode: [
                    {
                        required: true,
                        message: "请输入验证码",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    methods: {
        getYcode() {
            setTimeout(this.draw, 200);
        },
        //生成验证码
        draw() {
            this.verificode = "";
            function randomColor() {
                let r = Math.floor(Math.random() * 256);
                let g = Math.floor(Math.random() * 256);
                let b = Math.floor(Math.random() * 256);
                return "rgb(" + r + "," + g + "," + b + ")";
            }

            // let canvas = document.getElementById('canvas')

            let canvas_width = 70;
            let canvas_height = 30;
            let canvas = document.getElementById("canvas"); //获取到canvas的对象，演员
            let context = canvas.getContext("2d"); //获取到canvas画图的环境，演员表演的舞台
            canvas.width = canvas_width;
            canvas.height = canvas_height;
            let sCode =
                "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z";

            let aCode = sCode.split(",");
            let aLength = aCode.length; //获取到数组的长度
            for (let i = 0; i < 4; i++) {
                //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
                let j = Math.floor(Math.random() * aLength); //获取到随机的索引值
                // let deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
                // let deg = Math.random() - 0.5; //产生一个随机弧度
                let txt = aCode[j]; //得到随机的一个内容
                this.show_num[i] = txt.toLowerCase();
                let x = 5 + i * 15; //文字在canvas上的x坐标
                let y = 20 + Math.random() * 10; //文字在canvas上的y坐标
                this.verificode += txt;
                context.font = "bold 22px 微软雅黑";
                context.translate(x, y);
                // context.rotate(deg);
                context.fillText(txt, 0, 0);
                // context.rotate(-deg);
                context.translate(-x, -y);
            }
            for (let i = 0; i <= 30; i++) {
                //验证码上显示小点
                context.strokeStyle = randomColor();
                context.beginPath();
                let x = Math.random() * canvas_width;
                let y = Math.random() * canvas_height;
                context.moveTo(x, y);
                context.lineTo(x + 1, y + 1);
                context.stroke();
            }
        },
        submitForm() {
            if (this.onoff) {
                this.$refs.login.validate((valid) => {
                    if (valid) {
                        if (
                            this.verificode.toLowerCase() ===
                            this.param.ycode.toLowerCase()
                        ) {
                            let loginUrl = `https://kpinterface.shejidedao.cn/interface-server/api/outSystemUserLogin.json?loginName=${this.param.username}&loginPassword=${this.param.password}`;
                            this.axios(loginUrl).then((res) => {
                                let getUserUrl = `https://kpinterface.shejidedao.cn/interface-server/api/outSystemGetOneUserDetail.json?outToken=${res.body.outToken}&userID=${res.body.userID}`;
                                this.axios(getUserUrl).then(result => {
                                    let data = result.body.data
                                    setItem('avatar', data.avatarURL)
                                    setItem('name', data.name)
                                    setItem('userInfo', encodeURIComponent(JSON.stringify(result.body.data)))
                                    setItem('ms_username', result.body.data.name)
                                    setToken(res.body.outToken);
                                    this.$notify({
                                        title: '成功',
                                        message: '登录成功',
                                        type: 'success',
                                        duration: 2000
                                    })
                                    setTimeout(() => {
                                        this.$router.push({ path: "/home" });
                                    }, 30);
                                })
                            });
                        } else {
                            this.$message.error("验证码错误");
                        }
                        this.draw()
                    } else {
                        return false;
                    }
                });
            } else {
                this.onoff = !this.onoff;
            }
        },
    },
    mounted() {
        this.getYcode();
    },
};
</script>

<style >
html,
body {
    height: 100%;
}

@font-face {
    font-family: "neo";
    src: url("../../public/css/NEOTERICc.ttf");
}
#login_wrap {
    width: 980px;
    min-height: 500px;
    border-radius: 10px;
    font-family: "neo";
    overflow: hidden;
    box-shadow: 0px 0px 120px rgba(0, 0, 0, 0.25);
    position: fixed;
    top: 50%;
    right: 50%;
    margin-top: -250px;
    margin-right: -490px;
}
#login {
    width: 50%;
    height: 100%;
    min-height: 500px;
    background: linear-gradient(45deg, #8a3e4e, #924454);
    position: relative;
    float: right;
}
#login #status {
    text-align: center;
    margin: 40px;
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}
#login #status i {
    font-style: normal;
    position: absolute;
    transition: 0.5s;
}
#login span {
    text-align: center;
}
#login span a {
    text-decoration: none;
    color: #fff;
    display: block;
    font-size: 18px;
}
#bg {
    background: linear-gradient(45deg, #211136, #bf5853);
    height: 100%;
}
/*绘图*/
#login_img {
    width: 50%;
    min-height: 500px;
    background: linear-gradient(45deg, #221334, #6c3049);
    float: left;
    position: relative;
}

#login_img span {
    position: absolute;
    display: block;
}
#login_img .circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: linear-gradient(45deg, #df5555, #ef907a);
    top: 70px;
    left: 50%;
    margin-left: -100px;
    overflow: hidden;
}
#login_img .circle span {
    width: 150px;
    height: 40px;
    border-radius: 50px;
    position: absolute;
}
#login_img .circle span:nth-child(1) {
    top: 30px;
    left: -38px;
    background: #c55c59;
}
#login_img .circle span:nth-child(2) {
    bottom: 20px;
    right: -35px;
    background: #934555;
}
#login_img .star span {
    background: radial-gradient(#fff 10%, #fff 20%, rgba(72, 34, 64, 0));
    border-radius: 50%;
    box-shadow: 0 0 7px #fff;
}
#login_img .star span:nth-child(1) {
    width: 15px;
    height: 15px;
    top: 50px;
    left: 30px;
}
#login_img .star span:nth-child(2) {
    width: 10px;
    height: 10px;
    left: 360px;
    top: 80px;
}
#login_img .star span:nth-child(3) {
    width: 5px;
    height: 5px;
    top: 400px;
    left: 80px;
}
#login_img .star span:nth-child(4) {
    width: 8px;
    height: 8px;
    top: 240px;
    left: 60px;
}
#login_img .star span:nth-child(5) {
    width: 4px;
    height: 4px;
    top: 20px;
    left: 200px;
}
#login_img .star span:nth-child(6) {
    width: 4px;
    height: 4px;
    top: 460px;
    left: 410px;
}
#login_img .star span:nth-child(7) {
    width: 6px;
    height: 6px;
    top: 250px;
    left: 350px;
}
#login_img .fly_star span {
    width: 90px;
    height: 3px;
    background: -webkit-linear-gradient(
        left,
        rgba(255, 255, 255, 0.67),
        rgba(255, 255, 255, 0)
    );
    background: -o-linear-gradient(
        left,
        rgba(255, 255, 255, 0.67),
        rgba(255, 255, 255, 0)
    );
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.67),
        rgba(255, 255, 255, 0)
    );
    transform: rotate(-45deg);
}
#login_img .fly_star span:nth-child(1) {
    top: 60px;
    left: 80px;
}
#login_img .fly_star span:nth-child(2) {
    top: 210px;
    left: 332px;
    opacity: 0.6;
}
#login_img p {
    text-align: center;
    color: #af4b55;
    font-weight: 600;
    margin-top: 365px;
    font-size: 25px;
}
#login_img p i {
    font-style: normal;
    margin-right: 45px;
}
#login_img p i:nth-last-child(1) {
    margin-right: 0;
}
#login_wrap .login-btn {
    width: 50%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
#login_wrap .login-btn button {
    width: 50%;
    height: 36px;
    text-align: center;
    margin-bottom: 10px;
}
#login_wrap .login-tips {
    font-size: 12px;
    line-height: 30px;
    color: #fff;
}
/*提示*/
#hint {
    width: 100%;
    line-height: 70px;
    /* background: linear-gradient(-90deg, #9b494d, #bf5853); */
    text-align: center;
    font-size: 40px;
    color: #fff;
    /* box-shadow: 0 0 20px #733544; */
    /* display: none; */
    /* opacity: 0; */
    transition: 0.5s;
    position: absolute;
    top: 40px;
    z-index: 999;
}
#login_wrap .el-input__inner {
    width: 300px;
    height: 30px;
    font-size: 18px;
    background: none;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #fff;
    color: #fff;
    margin-bottom: 20px;
}
#bottom_wrap {
    width: 100%;
    line-height: 60px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    position: absolute;
    bottom: 0;
    z-index: 999;
}
/* 响应式 */
@media screen and (max-width: 1000px) {
    #login_img {
        display: none;
    }
    #login_wrap {
        width: 490px;
        margin-right: -245px;
    }
    #login {
        width: 100%;
    }
}
@media screen and (max-width: 560px) {
    #login_wrap {
        width: 330px;
        margin-right: -165px;
    }
}
@media screen and (max-width: 345px) {
    #login_wrap {
        width: 290px;
        margin-right: -145px;
    }
}
.ms-content .el-input__inner:focus {
    border-color: #fff;
}
.ms-content {
    padding: 10px 30px 30px 30px;
    width: 75%;
    margin: 0 auto;
}
.ms-content input::placeholder {
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    font-family: "neo";
}
</style>
